<template>
	<view>
		<view class="u-margin-30 u-font-52">商家注册</view>
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<u-form-item :label-style="{marginLeft:'30rpx'}" :label-position="labelPosition" label="您合作的省份/地区" prop="region" label-width="330" class="input-margin">
					<u-input type="select" :select-open="pickerShow" v-model="model.region" placeholder="请选择地区" @click="pickerShow = true"></u-input>
			</u-form-item>
			<u-form-item :label-style="{marginLeft:'30rpx'}" :label-position="labelPosition" label="上传营业执照" prop="photo" label-width="250">
				<u-upload :action="action" :file-list="fileList" max-count="1" width="160" height="160"></u-upload>
				<text slot="right" class="u-light-color u-padding-right-30">请确保证件框完整，图像清晰，光线均匀。</text>
			</u-form-item>
			<u-form-item :label-style="{marginLeft:'30rpx'}" label-width="200" :label-position="labelPosition" label="商家简称" prop="abbreviation">
				<u-input placeholder="请输入简称" v-model="model.abbreviation" type="text"></u-input>
			</u-form-item>
			<u-form-item :label-style="{marginLeft:'30rpx'}" label-width="200" :label-position="labelPosition" label="公司类型" prop="company" class="input-margin">
				<u-input type="select" :select-open="selectShowCompany" v-model="model.company" placeholder="请选择类型" @click="selectShowCompany = true"></u-input>
			</u-form-item>
			<u-form-item :label-style="{marginLeft:'30rpx'}" :label-position="labelPosition" label="近一年营业额" prop="money" label-width="250">
				<u-input placeholder="请输入" input-align="right" :clearable="false" v-model="model.money" type="number"></u-input>
				<text slot="right" class="u-content-color u-padding-right-30">万元</text>
			</u-form-item>
			<u-form-item :label-style="{marginLeft:'30rpx'}" label-width="200" :label-position="labelPosition" label="纳税级别" prop="payTaxes" class="input-margin">
				<u-input type="select" :select-open="selectShowpayTaxes" v-model="model.payTaxes" placeholder="请选择级别" @click="selectShowpayTaxes = true"></u-input>
			</u-form-item>
			<u-gap height="10" bg-color="#f4f4f4"></u-gap>
			<u-form-item :label-style="{marginLeft:'30rpx'}" label-width="200" :label-position="labelPosition" label="业务联系人" prop="name">
				<u-input placeholder="请输入联系人名称" v-model="model.name" type="text"></u-input>
			</u-form-item>
			<u-form-item :label-style="{marginLeft:'30rpx'}" label-width="200" :label-position="labelPosition" label="联系人职位" prop="position">
				<u-input placeholder="请输入联系人职位" v-model="model.position" type="text"></u-input>
			</u-form-item>
			<u-gap height="10" bg-color="#f4f4f4"></u-gap>
			<u-form-item :label-style="{marginLeft:'30rpx'}" :label-position="labelPosition" label="办公地区" prop="regionWork" label-width="200" class="input-margin">
					<u-input type="select" :select-open="WorkShow" v-model="model.regionWork" placeholder="请选择地区" @click="WorkShow = true"></u-input>
			</u-form-item>
			<u-form-item :label-style="{marginLeft:'30rpx'}" label-width="200" :label-position="labelPosition" label="详细地址" prop="addWork">
				<u-input placeholder="请输入详细地址" v-model="model.addWork" type="text"></u-input>
			</u-form-item>
			<u-gap height="10" bg-color="#f4f4f4"></u-gap>
			
			<u-form-item :label-style="{marginLeft:'30rpx'}" :label-position="labelPosition" label="仓库地区" prop="regionWarehouse" label-width="200" class="input-margin">
					<u-input type="select" :select-open="WarehouseShow" v-model="model.regionWarehouse" placeholder="请选择地区" @click="WarehouseShow = true"></u-input>
			</u-form-item>
			<u-form-item :label-style="{marginLeft:'30rpx'}" label-width="200" :label-position="labelPosition" label="详细地址" prop="addWarehouse">
				<u-input placeholder="请输入详细地址" v-model="model.addWarehouse" type="text"></u-input>
			</u-form-item>
			<u-form-item :label-style="{marginLeft:'30rpx'}" :label-position="labelPosition" label="仓库面积" prop="aSize" label-width="250">
				<u-input placeholder="请输入" input-align="right" :clearable="false" v-model="model.aSize" type="number"></u-input>
				<text slot="right" class="u-content-color u-padding-right-30">平方米</text>
			</u-form-item>
			
			
		</u-form>
		<view class="u-margin-30">
			<u-button
			:loading="loading"
			:custom-style="customStyle" 
			:hair-line="false" 
			:ripple="true" 
			:ripple-bg-color="rippleBg"
			 @click="submit">{{loading? '加载中' : '下一步'}}</u-button>
		</view>
		<u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm" :defaultRegion="defaultRegion"></u-picker>
		<u-select mode="single-column" :list="selectListCompany" v-model="selectShowCompany" @confirm="selectCompany"></u-select>
		<u-select mode="single-column" :list="selectListpayTaxes" v-model="selectShowpayTaxes" @confirm="selectpayTaxes"></u-select>
		<u-picker mode="region" v-model="WorkShow" @confirm="WorkConfirm" :defaultRegion="defaultRegion"></u-picker>
		<u-picker mode="region" v-model="WarehouseShow" @confirm="WarehouseConfirm" :defaultRegion="defaultRegion"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model: {
					region: '',
					photo: '',
					abbreviation:'',
					company: '',
					money: '',
					name:'',
					position:'',
					regionWork: '',
					addWork:'',
					regionWarehouse:'',
					addWarehouse:'',
					aSize:''
				},
				// 演示地址，请勿直接使用！！！
				action: 'http://www.example.com/upload',
				fileList: [],
				selectListCompany: [
					{
						value: '有限责任公司',
						label: '有限责任公司'
					},
					{
						value: '股份有限公司',
						label: '股份有限公司'
					},
					{
						value: '有限合伙企业',
						label: '有限合伙企业'
					},
					{
						value: '外商独资公司',
						label: '外商独资公司'
					},
					{
						value: '个人独资企业',
						label: '个人独资企业'
					},
					{
						value: '国有独资公司',
						label: '国有独资公司'
					},
					{
						value: '其他',
						label: '其他'
					}
				],
				selectListpayTaxes: [
					{
						value: 'A级',
						label: 'A级'
					},
					{
						value: 'B级',
						label: 'B级'
					},
					{
						value: 'M级',
						label: 'M级'
					},
					{
						value: 'C级',
						label: 'C级'
					},
					{
						value: 'D级',
						label: 'D级'
					}
				],
				rules: {
					region: [
						{
							required: true,
							message: '请选择地区',
							trigger: 'change',
						}
					],
					abbreviation: [
						{
							required: true,
							message: '请输入简称',
							trigger: 'blur' ,
						},
						{
							min: 1,
							max: 10,
							message: '简称长度在1到10个字符',
							trigger: ['change','blur'],
						},
					],
					company: [
						{
							required: true,
							message: '请选择公司类型',
							trigger: 'change',
						}
					],
					payTaxes: [
						{
							required: true,
							message: '请选择级别',
							trigger: 'change',
						}
					],
					money: [
						{
							required: true,
							message: '请输入金额',
							trigger: ['change','blur']
						},
						{
							type: 'number',
							message: '只能为数字',
							trigger: ['change','blur'],
						}
					],
					name: [
						{
							required: true,
							message: '请输入联系人',
							trigger: 'blur' ,
						},
						{
							min: 1,
							max: 10
						},
						{
							// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.chinese(value);
							},
							message: '名称必须为中文',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change','blur'],
						}
					],
					position: [
						{
							required: true,
							message: '请输入联系职位',
							trigger: 'blur' ,
						},
						{
							min: 1,
							max: 8
						},
					],
					regionWork: [
						{
							required: true,
							message: '请选择办公地区',
							trigger: 'change',
						}
					],
					addWork: [
						{
							required: true,
							message: '请输入详细地址',
							trigger: 'blur' ,
						}
					],
					regionWarehouse: [
						{
							required: true,
							message: '请选择仓库地区',
							trigger: 'change',
						}
					],
					addWarehouse: [
						{
							required: true,
							message: '请输入详细地址',
							trigger: 'blur' ,
						}
					],
					aSize: [
						{
							required: true,
							message: '请输入金额',
							trigger: ['change','blur']
						}
					]
				},
				defaultRegion: ['广东省', '湛江市', '赤坎区'],//地区默认
				pickerShow:false,
				selectShowCompany: false,
				selectShowpayTaxes: false,
				WorkShow:false,
				WarehouseShow:false,
				labelPosition: 'left',
				errorType: ['message'],
				disabled:true,
				loading:false,
				// 按钮css样式
				rippleBg:'rgba(255,255,255,0.3)',
				customStyle: {
					height:'100rpx',
					backgroundColor:'#191d19',
					boxShadow:'0 12rpx 20rpx -8rpx rgba(28, 34, 28, 0.3)',
					fontSize:'32rpx',
					fontWeight:'bold',
					color:'#FFF',
					marginTop:'90rpx'
				},
				Style: {
					height:'100rpx',
					backgroundColor:'rgb(123,125,123)',
					boxShadow:'0 12rpx 20rpx -8rpx rgba(28, 34, 28, 0.3)',
					fontSize:'32rpx',
					fontWeight:'bold',
					color:'#FFF',
					marginTop:'90rpx'
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			// 选择地区回调
			regionConfirm(e) {
				this.model.region = e.province.label + '-' + e.city.label + '-' + e.area.label;
			},
			// 选择类型类型回调
			selectCompany(e) {
				this.model.company = '';
				e.map((val, index) => {
					this.model.company += this.model.company == '' ? val.label : '-' + val.label;
				})
			},
			// 选择纳税级别回调
			selectpayTaxes(e) {
				this.model.payTaxes = '';
				e.map((val, index) => {
					this.model.payTaxes += this.model.payTaxes == '' ? val.label : '-' + val.label;
				})
			},
			// 选择办公地区回调
			WorkConfirm(e) {
				this.model.regionWork = e.province.label + '-' + e.city.label + '-' + e.area.label;
			},
			// 选择仓库地区回调
			WarehouseConfirm(e) {
				this.model.regionWarehouse = e.province.label + '-' + e.city.label + '-' + e.area.label;
			},
			// 下一步-提交
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.loading = true;
						setTimeout(() => {
							this.loading = false;
							uni.navigateTo({
								url: 'two',
							});
						}, 2000);
						// if(!this.model.agreement) return this.$u.toast('请勾选协议');
					} else {
						this.loading = true;
						setTimeout(() => {
							this.loading = false;
							this.$u.toast('验证失败，请重新再试');
						}, 2000);
					}
				});
			}
		}
	}
</script>

<style>
	page{
		 background-color: #FFFFFF !important;
	}
	.input-margin .u-input{
		margin-right: 30rpx !important;
	}
</style>
<style lang="scss" scoped>
	.u-margin-30{
		margin: 60rpx 30rpx !important;
		line-height: 62rpx;
	}
</style>
